import React, { useState, useEffect } from 'react';
import { Form, Button, Space, notification } from 'antd';
import { goBack, componentsMap } from '@/utils/util';
import UploadList from '@/components/UploadList';
import API from '@/api/xjindex';
import { useModel } from 'umi';
import moment from 'moment';

const addSafeCheck = () => {
  const { initialState } = useModel('@@initialState');
  const { username, userId } = initialState.info;
  const [orgList, setOrgList] = useState([]);
  const [form] = Form.useForm();
  form.setFieldsValue({
    userName: username,
    createTime: moment().format('YYYY-MM-DD'),
  });
  const formList = [
    {
      name: 'orgId',
      title: '所属单位',
      type: 'select',
      otherProps: {
        options: orgList,
      },
      rules: [
        {
          required: true,
          message: '请输入资产名称!',
        },
      ],
    },
    {
      name: 'userName',
      type: 'input',
      title: '创建人',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'createTime',
      type: 'input',
      title: '创建时间',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'remakes',
      type: 'textarea',
      title: '备注说明',
      isBlock: true,
    },
  ];
  const submitFn = (values) => {
    const params = {
      orgId: values.orgId,
      username: username,
      userId: userId,
      remarks: values.remakes,
      securityCheckFileList: values.file,
    };
    API.addSc(params).then((res) => {
      if (res) {
        notification.success({
          message: '新增成功',
        });
        goBack();
      }
    });
  };
  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };
  function initList() {
    API.getOrgList().then((res) => {
      if (res) {
        setOrgList(
          res.t.map((item) => {
            return {
              label: item.name,
              value: item.id,
            };
          }),
        );
      }
    });
  }
  useEffect(() => {
    initList();
  }, []);
  return (
    <div className="main-x">
      <Form form={form} onFinish={submitFn}>
        <div className="base-title">检查报告信息</div>
        <div className="ant-form-inline form-x bgf">
          {formList.map((item) => {
            return (
              <Form.Item
                key={item.name}
                label={item.title}
                name={item.name}
                className={item.isBlock ? 'block' : ''}
                rules={item.rules}
              >
                {componentsMap(item.type, item.otherProps)}
              </Form.Item>
            );
          })}
        </div>
        <div className="base-title mt20">附件信息</div>
        <div className="form-x bgf" style={{ paddingBottom: '16px' }}>
          <Form.Item
            label="附件信息"
            extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
            name="file"
            className="block"
          >
            <UploadList
              uploadUrl="/securityCheck/fileUpload"
              downloadUrl="/securityCheck/downloadSc"
              options={uploadOptions}
            ></UploadList>
          </Form.Item>
        </div>
        <div className="footer-x">
          <Space size={18}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
};
export default addSafeCheck;
